<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>本地存储</title>
</head>

<body>
  <input type="text" name="username" value="" />
  <br />
  <input type="text" name="password" value="" />
  <br />
  <button id="btn">登录</button>

  <script>
   const userInfo = {
      username: 'admin',
      password: '123456'
    }
                                    
    const inputs = document.querySelectorAll('input')
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
      let obj = {}
      for (const input of inputs) {
        if (input.value === '') {
          return alert('输入内容不能为空')
        }
        obj[input.name] = input.value
      }
      for (const k of Object.keys(userInfo)) {
        if (userInfo[k] !== obj[k]) {
          return alert('用户名或密码输入不正确')
        }
      }
      localStorage.setItem('userInfo', JSON.stringify(obj))
      let i = 3
      setInterval(function () {
        btn.innerHTML = `${i}秒后进行跳转`
        if (i === 1) {
          location.href = 'list.html'
        }
        i--
      }, 1000)
    })
  </script>
</body>

</html>